<style>
  body {
    position: relative;
  }

  .signin-info *, .no-margins {
    color: #5E5E5E;
  }

  .signup-footer {
    margin: 0;
  }

  .signinpaneX {
    width: 100%;
    display: block;
    position: absolute;
    margin: 0 auto;
    left: 0;
    top: 0;
    height: 450px;
    background: url("../assets/images/login/bg.png") center center no-repeat;
    background-size: cover;
  }
  .login-title{
    background: url("../assets/images/login/logo.png") 30px center no-repeat;
    background-size: 80px 80px;
    padding-left: 105px;
    font-size: 32px;
    color: #000;
    position: absolute;
    width: 100%;
    left: 0;
    top: -105px;
    height: 100px;
    line-height: 100px;
  }

  .log-div {
    border-radius: 10px;
    background: transparent;
    padding: 30px;
  }

  #_login_form {
    background: transparent;
  }

  .form-control {
    height: 50px;
  }

  .btn-success1 {
    background: #50b5ed;
    margin-top: 15px;
    color: #ffffff;
    font-size: 22px;
    height: 50px;
  }

  .btn-success1:hover {
    color: #ffffff;
  }

  h3 {
    font-weight: 100;
  }
</style>
<template>
  <div style="position: relative;height:100%;">
  <div id="signinpaneX" class="signinpaneX">
    <p class="login-title">资中县河长制湖长制管理信息系统</p>
    <div class="signinpanel">
      <div class="row log-div">
        <div class="col-sm-7" style="width: 350px;">
          <div style="width: 100%;color: #fff;margin-bottom: 0px;">
            <h2 style="font-weight: bolder">用户登录</h2>
          </div>
          <form @submit.prevent="login" class="form-horizontal m-t" id="_login_form">
            <h4 class="text-danger" v-html="result.message" v-show="result.code!=0"></h4>
            <div class="form-group">
              <input aria-required="true" class="form-control uname" placeholder="用户名" required="" type="text" v-model="formData.account"/>
            </div>
            <div class="form-group">
              <input aria-required="true" autocomplete="new-password" class="form-control pword" placeholder="密码" required="" type="password" v-model="password"/>
            </div>
            <div style="width: 100%;">
              <button class="btn btn-success1 btn-block" type="submit">登录</button>
            </div>
          </form>
          <div style="height: 40px;width: 100%;text-align: left;margin-left: 50px;color: #999c9e;"></div>
        </div>
      </div>
      <!-- <div class="signup-footer">
        <div class="pull-left">
          &copy; Copyright 2020 XX 版权所有 All rights reserved
        </div>
      </div> -->
    </div>
  </div>
  </div>
</template>
<script>
  import axios from 'axios';
  import '@/assets/css/style.css'
  import '@/assets/css/login.css'
  import 'babel-polyfill'
  import $ from '@/assets/js/jquery-vendor.js'
  import '@/assets/js/validate/validation-vendor.js'
  import '@/assets/js/boss'

  window.ishtmltop = true;
  if (window.top !== window.self) {
    window.top.location = window.location
  }

  export default {
    data() {
      return {
        result: {},
        password: '',
        formData: {
          account: '',
          verifyCode: ''
        },
        verifyUrl: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this
      $('#_login_form').validate();
      window.onresize = function () {
        that.winresize();
      };
      that.winresize();
      that.refreshVerifyUrl();
    },
    methods: {
      refreshVerifyUrl() {
        // this.verifyUrl = site.sign.verify + '?t=' + (new Date()).getTime();
      },
      login() {
        let that = this
        if ($('#_login_form').valid()) {
          axios.defaults.headers = {'Authorization': ''};
          that.staff.encrypt((encrypt) => {
            // console.info(that.crypto.md5(that.password))
            that.formData.password = that.crypto.encrypt(encrypt.key, that.crypto.md5(that.password));
            // console.info(that.formData.password)
            // console.info(that.decrypt(encrypt.key, that.formData.password));
            that.staff.login(that.formData, (result) => {
              if (result.code === 0) {
                location.href = '/'
              } else {
                that.refreshVerifyUrl();
              }
            });
          });
        }
        return false;
      },
      winresize() {
        $('#signinpaneX').css('margin-top', ($(window).height() - 370) / 2);
      }
    }
  }
</script>
